html {scroll-behavior: smooth;}
body {margin: 0; font-family: 'Josefin Sans', serifenlose; color: #5c5c5c; background-color: rgb(255, 249, 201)}
.body {overflow: hidden}
header {height: 100vh; text-align: center; background: url("images/Ferienhaus direkt am Meer.jpg") center/cover fixed; margin-bottom: 100px}
header div {margin: 0; padding: 50px 0; font-size: 2em; letter-spacing: 1em; margin-bottom: 100px; background-color: rgb(255, 249, 201)}
h1 {font-size: 2em}
h1, h2, p, main {text-align: center; margin: 2em auto}
nav li {display: inline-block; padding: 0.4em; margin: 0 10px; background-color: #fff780; border-radius: 45%}
nav a {text-decoration: none; color: inherit; font-size: 1.2em}
nav li:hover {border-radius: 70% 45%}
nav a:hover {color: initial; font-size: 1.5em}
p, main li {width: 80%; margin: 10px auto; line-height: 185%; font-size: 1.2em}
img {display: block; margin: 5px auto; max-width: 60%}
.gall {text-align: center}
.gall img {display: initial; max-width: 100%; position: absolute; top: 50%; transform: translate(-50%, -50%); cursor: pointer}
.gall .none {position: initial; transform: initial; max-width: initial; max-height: 100%}
.soso {width: 27%; aspect-ratio: 3 / 2; display: inline-block; overflow: hidden; margin: 15px; position: relative}
.stick {position: fixed; top: 0; z-index: 1; width: 100%; margin: 0; background-color: #fff780}
.toto {margin: 4em}
figure {margin: 0!important}
footer {border-top: 1px black solid}

@media (max-width: 750px) {img {position: initial!important; transform: initial!important; max-width: 100%!important} .soso {width: initial; aspect-ratio: initial} 
nav {text-align: center; position: absolute !important; top: 0; background-color: #fff780; height: 40px; width: 100%; overflow: hidden}   
nav::before {content: "☰"; font-size: 30px} li {display: block!important; margin: 0 auto; padding: 20px 0!important} .newBox {height: auto} .Boxb {width: initial!important}}

.Box {position: fixed; top: 0; z-index: 2; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8)}
.Boxb {position: relative; min-width: 400px; margin: 15vh auto; text-align: center;}
.new {position: initial; transform: initial; max-height: 75vh; cursor: pointer; border: 2px white solid;} 

.renew {animation: 0.3s new linear}
@keyframes new {from {opacity: 0;} to {opacity: 1}}
.remove {animation: 0.3s back linear}
@keyframes back {100% {opacity: 0}}

button {font-size: 1.5rem; position: absolute; top: 10px; right: 10px} 
.left {top: 50%; left: 0; right: initial}
.right {top: 50%; right: 0}



                     


/*
button {
	background: none;
	border: none;
        font-size: 1.5rem;
        color: white
      }   

.removel {animation: 0.3s backl linear}
@keyframes backl {
100% {margin-left: -100vw}
}

.remover {animation: 0.3s backr linear}
@keyframes backr {
100% {margin-left: 100vw}
}*/